<template>
	<view class="Content">
		<view class="oneContent">
			<!-- 左侧医生头像和是否在线 -->
			<view class="oneContent-left">
				<view class="oneContent-left-image">
					<image
						src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/82138be4ac961c9a78e6585d1b1e415d.png?Expires=1932174045&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=DiS6Kgz6lCtHn0ojderwYPRW51g%3D"
						mode=""></image>
				</view>
				<view class="oneContent-left-text">在线</view>
			</view>
			<!-- 右侧功能区 -->
			<view class="oneContent-right">
				<!-- 就诊医生名称 职位 -->
				<view class="oneContent-right-docName">
					<view class="oneContent-right-docName-name">
						吴婉莹
					</view>
					<view class="oneContent-right-docName-status">
						<text class="oneContent-right-docName-status-text">执业医师</text>
					</view>
				</view>
				<!-- 所在药店地址 -->
				<view class="oneContent-right-docPlace">
					万承志堂中医馆
				</view>
				<!-- 评价人数 服务人数 -->
				<view class="oneContent-right-docService">
					<text>0 </text>评价 <text> 0 </text> 服务人数
				</view>
				<!-- 抢号的展示界面 -->
				<view class="oneContent-right-takingNumber">
					<!-- 测试抢号的标题 -->
					<view class="oneContent-right-takingNumber-top">
						测试抢号
					</view>
					<!-- 抢号的进度条显示 -->
					<view class="oneContent-right-takingNumber-center">
						<view class="oneContent-right-takingNumber-center-process">
							<progress class="oneContent-right-takingNumber-center-process-item" percent="33"
								activeColor="#75161B" stroke-width="4" />
						</view>
						<view class="oneContent-right-takingNumber-center-text">
							<text class="oneContent-right-takingNumber-center-text-reserve">0</text>
							<text>/</text>
							<text class="oneContent-right-takingNumber-center-text-offer">3</text>
							<text>人</text>
						</view>
					</view>
					<!-- 剩余几个号 剩余几天 -->
					<view class="oneContent-right-takingNumber-bottom">
						<text class="oneContent-right-takingNumber-bottom-NumberRetaining">剩余3个号</text>
						<text class="oneContent-right-takingNumber-bottom-NumberRetaining">剩余0天 23:53:29</text>
					</view>
				</view>
				<!-- 查看评价 和 抢号的按钮 -->
				<view class="oneContent-right-function">
					<view class="oneContent-right-function-checkEvalute">
						<text>查看评价</text>
					</view>
					<view class="oneContent-right-function-takingNumber" @tap="TakingNumber()">
						<text>抢号</text>
					</view>
				</view>
			</view>

		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			TakingNumber(){
				uni.navigateTo({
					url:'../qianghao_user/qianghao_user'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #EFEFEF;
	}

	.oneContent {
		border-radius: 14rpx;
		margin: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		height: 380rpx;
		margin-bottom: 6rpx;
	}

	.oneContent-left {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.oneContent-left-image {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		overflow: hidden;
	}

	.oneContent-left-image image {
		height: 100%;
		width: 100%;
	}

	.oneContent-right {
		flex: 1;
	}

	.oneContent-left-text {
		width: 54rpx;
		height: 20rpx;
		line-height: 14rpx;
		font-size: 14rpx;
		background: #FA948E;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.oneContent-right-docName {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.oneContent-right-docName-name {
		font-size: 30rpx;
		font-weight: bold
	}

	.oneContent-right-docName-status {
		margin-left: 10rpx;
	}

	.oneContent-right-docName-status-text {
		color: #C3C3C3;
		font-size: 24rpx;
	}

	.oneContent-right-docPlace {
		margin-top: 4rpx;
		color: #7E7E7E;
		font-size: 26rpx;
	}

	.oneContent-right-docService {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #ababab;
	}

	.oneContent-right-docService text {
		color: #8b2d2e;
		font-weight: bold;
		margin-left: 4rpx;
		margin-right: 6rpx;
	}

	.oneContent-right-takingNumber {
		margin-top: 14rpx;
		margin-right: 18rpx;
	}

	.oneContent-right-takingNumber-top {
		color: #7a1414;
		font-size: 26rpx;
	}

	.oneContent-right-takingNumber-center {
		display: flex;
		flex-direction: row;
	}

	.oneContent-right-takingNumber-center-process {
		margin-top: 8rpx;
		margin-right: 8rpx;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.oneContent-right-takingNumber-center-process-item {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60%;
		width: 320rpx;
	}

	.oneContent-right-takingNumber-center-text {
		color: #7a1414;
		font-size: 30rpx;
	}

	.oneContent-right-takingNumber-bottom {
		color: #AFAFAF;
		font-size: 26rpx;
	}

	.oneContent-right-takingNumber-bottom text {
		margin: 0 4rpx;
	}

	.oneContent-right-function {
		margin: 34rpx 0;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		float: right;
	}

	.oneContent-right-function-checkEvalute {
		border: #75161B solid 4rpx;
		border-radius: 36rpx;
		width: 126rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14rpx;

	}

	.oneContent-right-function-checkEvalute text {
		font-size: 26rpx;
		color: #75161B;
	}

	.oneContent-right-function-takingNumber {
		background: #a81f28;
		border-radius: 38rpx;
		width: 94rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.oneContent-right-function-takingNumber text {
		font-size: 26rpx;
		color: white;
	}
</style>
